import React from "react"
import { Navigate, useRoutes } from "react-router-dom"
import DefaultLayout from "../layouts/DefaultLayout"
import LogoOnlyLayout from "../layouts/LogoOnlyLayout"
import Blog from "../pages/blog"
import User from "../pages/user"
import Login from "../pages/login"
import NotFound from "../pages/page404"
import Register from "../pages/register"
import Products from "../pages/product"
import DashboardApp from "../pages/dashboardApp"
import Recommends from "../pages/recommends"
import Community from "../pages/community"
import Introduction from "../pages/introduction"
import Projects from "../pages/projects"
import ZmoAI from "../pages/projects/ZmoAI"

export default function Router() {
  return useRoutes([
    {
      path: "/",
      element: <DefaultLayout />,
      children: [
        { path: "", element: <Navigate to="recommends" /> },
        { path: "recommends", element: <Recommends /> },
        { path: "community", element: <Community /> },
        { path: "blog", element: <Blog /> },
        {
          path: "about",
          children: [
            { path: "", element: <Navigate to="introduction" /> },
            {
              path: "projects",
              element: <Projects />,
            },
            {
              path: "projects/zmoai",
              element: <ZmoAI />,
            },
            { path: "introduction", element: <Introduction /> },
          ],
        },

        { path: "app", element: <DashboardApp /> },
        { path: "user", element: <User /> },
      ],
    },

    {
      path: "/",
      // element: <LogoOnlyLayout />,
      children: [
        { path: "login", element: <Login /> },
        { path: "register", element: <Register /> },
        { path: "404", element: <NotFound /> },
        { path: "*", element: <Navigate to="/404" /> },
      ],
    },
    { path: "*", element: <Navigate to="/404" replace /> },
  ])
}
